<script setup lang="ts">
defineOptions({
  name: "flexdemo"
});
</script>

<template>
  <div class="main">
    <h1>Flex布局学习</h1>
    <div class="outter">
      <div class="inner">
        对这个<br />
        世界<br />
        如果你<br />
      </div>
      <div class="inner">
        有太多的<br />
        抱怨<br />
        跌倒了<br />
      </div>
      <div class="inner">
        就不敢<br />
        继续<br />
        往前走。<br />
      </div>
      <div class="inner">
        就不敢<br />
        继续<br />
        往前走<br />
      </div>
      <div class="inner">111</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.outter {
  border: 2px dashed #387779;
  padding: 2px;
  display: flex;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: #a3af92;
  border-radius: 5px;
  padding: 4px;
  margin-left: 3px;
  flex-direction: column;
  // vertical-align: top;
}
</style>
